<template>
    <div class="example">
        <div class="wrap-header">

            <div class="filter">
                <!-- 根据当前列最长的文字 比如最长是4个人字 filter-item_4 -->
                <div class="filter-item_4">
                    <div class="filter-item">
                        <div class="filter-item-key">姓名：</div>
                        <div class="filter-item-val">
                            <el-input size="small"></el-input>
                        </div>
                    </div>
                    <div class="filter-item">
                        <div class="filter-item-key">用户状态：</div>
                        <div class="filter-item-val">
                            <el-input size="small"></el-input>
                        </div>
                    </div>
                    <div class="filter-item">
                        <div class="filter-item-key">用状态：</div>
                        <div class="filter-item-val">
                            <el-input size="small"></el-input>
                        </div>
                    </div>
                </div>
                <!-- 根据当前列最长的文字 比如最长是6个人字 filter-item_6 -->
                <div class="filter-item_6">
                    <div class="filter-item">
                        <div class="filter-item-key">名：</div>
                        <div class="filter-item-val">
                            <el-input size="small"></el-input>
                        </div>
                    </div>
                    <div class="filter-item">
                        <div class="filter-item-key">用户状态用户：</div>
                        <div class="filter-item-val">
                            <el-input size="small"></el-input>
                        </div>
                    </div>
                    <div class="filter-item">
                        <div class="filter-item-key">用状态：</div>
                        <div class="filter-item-val">
                            <el-input size="small"></el-input>
                        </div>
                    </div>
                </div>

                <div class="filter-item_5">
                    <div class="filter-item">
                        <div class="filter-item-key">名：</div>
                        <div class="filter-item-val">
                            <el-input size="small"></el-input>
                        </div>
                    </div>
                    <div class="filter-item">
                        <div class="filter-item-key">用户状态户：</div>
                        <div class="filter-item-val">
                            <el-input size="small"></el-input>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrap-cont">
            <div class="wrap-cont-cover">

                <!-- 自定义form 一行显示几个 form_3 表示一行显示3个-->
                <div class="form form_3">
                    <div class="form-item">
                        <div class="form-item-key">姓名：</div>
                        <div class="form-item-val">leon</div>
                    </div>
                    <div class="form-item">
                        <div class="form-item-key">所属单位：</div>
                        <div class="form-item-val">这和科技有限公司</div>
                    </div>
                    <div class="form-item">
                        <div class="form-item-key">电话：</div>
                        <div class="form-item-val">15988402811</div>
                    </div>
                    <div class="form-item">
                        <div class="form-item-key">用户类型：</div>
                        <div class="form-item-val">个人</div>
                    </div>
                </div>

                <el-form label-position="right" label-width="200px">
                    <el-form-item label="活动形式活动名称">
                        <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域">
                        1212
                    </el-form-item>
                    <el-form-item label="活动形式活动">
                        活动区域活动区域活动区域活动区域活动区域活动区域活动区域活动区域活动区域活动区域
                    </el-form-item>
                </el-form>

                <el-table :data="tableData" style="width: 100%">
                    <el-table-column
                        width="480"
                        prop="date"
                        label="日期">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="姓名">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="地址">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'examplePage',
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: ''
            };
        },
        components: {},
        methods: {},
        mounted() {
            // this.$eventBus.emit('updateTitle', 'test example');
        }

    };

</script>

<style ref="stylesheet/scss" lang="scss">
    .example {

    }
</style>
